@section('page-title-right')
  <button type="button" class="btn btn-primary save-btn" onclick="app.submit('form')">{{ __('common.save') }}</button>
@endsection

<div class="mb-5" id="app">
  <el-form ref="form" :model="form" class="form-wrap" :inline-message="true">
    <table class="table table-bordered">
      <thead>
      <tr>
        <th>{{ __('PaypalSiteB::setting.entry_key') }}</th>
        <th>{{ __('PaypalSiteB::setting.entry_secret') }}</th>
        <th>{{ __('PaypalSiteB::setting.entry_status') }}</th>
        <th>{{ __('PaypalSiteB::setting.entry_debug') }}</th>
        <th>{{ __('PaypalSiteB::setting.entry_weight') }}</th>
        <th class="text-end"></th>
      </tr>
      </thead>
      <tbody v-if="form.polling_paypal.length">
      <tr v-for="(item, index) in form.polling_paypal" :key="index">

        <td>
          <el-form-item
            label="" :prop="`polling_paypal[${index}].key`" class="mb-0"
            :rules="[
                  { required: true, message: '{{ __('common.error_required', ['name' => __('PaypalSiteB::setting.entry_key')]) }}', trigger: ['blur', 'change'] },]"
          >
            <el-input size="small" v-model="item.key"
                      placeholder="{{ __('PaypalSiteB::setting.entry_key') }}"></el-input>
          </el-form-item>
        </td>
        <td>
          <el-form-item
            label="" :prop="`polling_paypal[${index}].secret`" class="mb-0"
            :rules="[
                { required: true, message: '{{ __('common.error_required', ['name' => __('PaypalSiteB::setting.entry_secret')]) }}', trigger: ['blur', 'change'] },]"
          >
            <el-input size="small" v-model="item.secret"
                      placeholder="{{ __('PaypalSiteB::setting.entry_secret') }}"></el-input>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="" prop="entry_status" class="mb-0">
            <el-switch v-model="item.status" :active-value="1" :inactive-value="0"></el-switch>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="" prop="entry_debug" class="mb-0">
            <el-switch v-model="item.is_debug" :active-value="1" :inactive-value="0"></el-switch>
          </el-form-item>
        </td>
        <td>
          <el-form-item
            label="" :prop="`polling_paypal[${index}].weight`" class="mb-0"
            :rules="[
                { required: true, message: '{{ __('common.error_required', ['name' => __('PaypalSiteB::setting.entry_weight')]) }}', trigger: ['blur', 'change'] },]"
          >
            <el-input size="small" v-model="item.weight"
                      placeholder="{{ __('PaypalSiteB::setting.entry_weight') }}"></el-input>
          </el-form-item>
        </td>
        <td class="text-end">
          <button type="button" @click="form.polling_paypal.splice(index, 1)"
                  class="btn btn-outline-danger btn-sm ml-1"><i
              class="bi bi-x-lg"></i></button>
        </td>
      </tr>
      <tr>
        <td colspan="4"></td>
        <td class="text-end">
          <button type="button" @click="addRow()" class="btn btn-sm btn-outline-primary">{{ __('common.add') }}</button>
        </td>
      </tr>
      </tbody>
      <tbody v-else>
      <td colspan="7">
        <div class="d-flex align-items-center justify-content-center p-4">
          <div class="text-secondary fs-5 me-2">{{ __('common.no_data') }}</div>
          <button type="button" @click="addRow()" class="btn btn-sm btn-outline-primary">{{ __('common.add') }}</button>
        </div>
      </td>
      </tbody>
    </table>
    <el-form-item
      label="A站域名"  class="mb-0"
      :rules="[
                  { required: true, message: '{{ __('common.error_required', ['name' => 'A站域名']) }}', trigger: ['blur', 'change'] },]"
    >
      <el-input size="small" v-model="form.site_a_domain"
                placeholder=""></el-input>
    </el-form-item>
    <el-form-item
      label="Token"  class="mb-0"
      :rules="[
                  { required: true, message: '{{ __('common.error_required', ['name' =>'Token']) }}', trigger: ['blur', 'change'] },]"
    >
      <el-input size="small" v-model="form.token"
                placeholder=""></el-input>
    </el-form-item>
    <el-form-item
      label="补差价商品ID"  class="mb-0"
      :rules="[
                  { required: true, message: '{{ __('common.error_required', ['name' =>'补差价商品ID']) }}', trigger: ['blur', 'change'] },]"
    >
      <el-input size="small" v-model="form.remaining_product_id"
                placeholder=""></el-input>
    </el-form-item>
  </el-form>
</div>

<ol class="list-group list-group-numbered lh-lg text-secondary">
  <li>此插件为Paypal轮询版本</li>
  <li>通过设置多个支付帐户,使客户支付订单时，系统自动均匀地分配一个支付帐户</li>
  <li>当一个订单被分配支付帐户但还没有支付成功时，再次支付，不会换帐户，将继续以之前配置的帐户进行支付</li>
  <li>鸡蛋（钱）不要放在一个篮子（支付帐户）中，才能增加抗风险能力</li>
</ol>

<style>
  .el-form-item__error--inline {
    margin-left: 0;
  }

  .el-form-item__content {
    line-height: 1;
  }
</style>

<script>
  let app = new Vue({
    el: '#app',

    data: {
      form: {
        site_a_domain: @json($plugin->getSetting('setting')['site_a_domain'] ?? ''),
        token: @json($plugin->getSetting('setting')['token'] ?? ''),
        polling_paypal: @json($plugin->getSetting('setting')['polling_paypal'] ?? []),
        remaining_product_id: @json($plugin->getSetting('setting')['remaining_product_id'] ?? []),
      },

      rules: {}
    },

    computed: {},

    methods: {
      submit(form) {
        this.$refs[form].validate((valid) => {
          if (!valid) {
            this.$message.error('{{ __('common.error_form') }}');
            return;
          }

          $http.post("{{ admin_route('plugin.paypal_s.setting') }}", this.form).then((res) => {
            layer.msg(res.message)
          })
        });
      },


      addRow() {
        this.form.polling_paypal.push({status: 1, key: '', secret: '', is_debug: 0})
      },
    }
  })
</script>
